<template>
  <div class="left-one">
    <!-- 标题 -->
    <div class="title-box">
      负责人信息
      <div class="title-line"></div>
      <div class="title-line2"></div>
    </div>
    <!-- 内容 -->
    <div class="content-box">
      <!-- 上盒子 人员信息 -->
      <div class="fzr-info">
        <div class="fzr-info-pic">
          <img
            style="width: 60%; height: 60%"
            src="@/assets/images/rightbox/user-pic.png"
          />
          <div class="fzr-info-pic-text">{{ fzrInfo.name }}</div>
        </div>
        <div class="fzr-info-content">
          <div class="fzr-info-content-item">
            <div style="width: 60px; color: rgb(200, 200, 200)">联系方式:</div>
            {{ fzrInfo.tele }}
          </div>
          <div class="fzr-info-content-item">
            <div style="width: 60px; color: rgb(200, 200, 200)">地址:</div>
            {{ fzrInfo.address }}
          </div>
          <div class="fzr-info-content-item">
            <div style="width: 60px; color: rgb(200, 200, 200)">警号:</div>
            {{ fzrInfo.number }}
          </div>
          <div class="fzr-info-content-item">
            <div style="width: 60px; color: rgb(200, 200, 200)">上级姓名:</div>
            {{ fzrInfo.boss }}
          </div>
          <div class="fzr-info-content-item">
            <div style="width: 60px; color: rgb(200, 200, 200)">上级电话:</div>
            {{ fzrInfo.bossTele }}
          </div>
        </div>
      </div>
      <!-- 其他信息 -->
      <div class="other-info">
        <div class="other-info-content">
          <div class="other-info-content-item">
            <div class="other-info-content-item-title">
              {{ nowEventInfo.title }}
              <div class="title-point1"></div>
              <div class="title-point2"></div>
              <div class="title-point3"></div>
            </div>
            <div class="other-info-content-item-content">
              {{ nowEventInfo.content }}
            </div>
          </div>
        </div>
        <!-- 上一页 -->
        <div class="pre-event-btn" @click="changeIndex(1)"><</div>
        <!-- 下一页 -->
        <div class="next-event-btn" @click="changeIndex(-1)">></div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      fzrInfo: {
        name: "负责人",
        tele: "13527668499",
        address: "XX派出所",
        boss: "奥特之父",
        bossTele: "66666666666",
        number: "007",
      },
      eventList: [
        {
          id: 111,
          title: "迪迦小区斗殴事件",
          content:
            "2024年12月23日，迪迦小区发生严重斗殴事件，200人大规模破坏建筑和互相斗殴，造成300人死亡，2000人受伤，已经将相关人员关押。",
        },
        {
          id: 222,
          title: "娱乐学校恐怖袭击",
          content:
            "1922年2月31日，娱乐学校闯入1000名恐怖份子，占领并屠杀了整个学校，事件及其恶劣，造成了5000人死亡，包括了4800名学生，警方已将其全部击毙。",
        },
        {
          id: 222,
          title: "吃人厂区吃人事件",
          content:
            "2021年11月50日，吃人厂区发生恶劣事件，厂区一车间发生吃人事件，A员工感染僵尸病毒，将同车间的B员工整个吃掉，军方已介入调查，暂无后续通知。",
        },
      ],
      nowEventInfo: {
        id: 111,
        title: "迪迦小区斗殴事件",
        content:
          "2024年12月23日，迪迦小区发生严重斗殴事件，200人大规模破坏建筑和互相斗殴，造成300人死亡，2000人受伤，已经将相关人员关押。",
      },
      nowEventIndex: 0,
    };
  },
  methods: {
    changeIndex(index) {
      let length = this.eventList.length;
      this.nowEventIndex = this.nowEventIndex + index;
      if (this.nowEventIndex < 0) {
        this.nowEventIndex = length - 1;
      }
      if (this.nowEventIndex >= length) {
        this.nowEventIndex = 0;
      }
      this.nowEventInfo = this.eventList[this.nowEventIndex];
    },
  },
  mounted() {},
};
</script>
  
  <style scoped>
.title-box {
  position: relative;
  padding: 0.8vw;
  display: flex;
  align-items: center;
  height: 20px;
  color: #fff;
  user-select: none;
  background-color: rgba(58, 64, 79, 0.8);
}

.content-box {
  padding: 0.5vw;
  height: 37vh;
  color: #fff;
}

.fzr-info {
  display: flex;
  width: 100%;
  height: 60%;
}
.fzr-info-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 40%;
  height: 100%;
  background-color: rgba(58, 64, 79, 0.8);
}
.fzr-info-pic-text {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  height: 20%;
  font-size: 14px;
}
.fzr-info-content {
  width: 60%;
}
.fzr-info-content-item {
  display: flex;
  padding: 5px;
  font-size: 12px;
}
.other-info {
  position: relative;
  width: 100%;
  height: 40%;
  background-color: gray;
}

.other-info-content {
  height: 75%;
}

.other-info-content-item {
  width: 100%;
  height: 100%;
}
.other-info-content-item-title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2px 5px;
  height: 25%;
  font-size: 12px;
  background-color: rgba(58, 64, 79, 0.8);
}
.other-info-content-item-content {
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 12px;
}

.pre-event-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  color: rgba(0, 0, 0, 0);
}
.pre-event-btn:hover {
  color: #fff;
  background-color: rgba(58, 64, 79, 0.8);
}
.next-event-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  color: rgba(0, 0, 0, 0);
}
.next-event-btn:hover {
  color: #fff;
  background-color: rgba(58, 64, 79, 0.8);
}
.title-point1 {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translate(0, -50%);
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: rgba(0, 236, 253, 0.86);
}.title-point2 {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: rgba(0, 236, 253, 0.6);
}
.title-point3 {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: #fff;
}
</style>